<template>
    <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='title?.oldPassword' prop='oldPassword'>
                    <el-input v-model.trim='formInline.oldPassword' clearable :placeholder='prompt?.oldPassword'
                        type="password" show-password />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='title?.newPassword' prop='newPassword'>
                    <el-input v-model.trim='formInline.newPassword' clearable :placeholder='prompt?.newPassword'
                        type="password" show-password />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='title?.rePassword' prop='rePassword'>
                    <el-input v-model.trim='formInline.rePassword' clearable :placeholder='prompt?.rePassword'
                        type="password" show-password />
                </el-form-item>
            </re-col>

        </el-row>
    </el-form>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { PASSWORD_REG } from '@/constant/index'
type FormProps = {
    formInline: any,
    isLoading: boolean
}
const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({} as any),
    isLoading: false
});

const title = {
    oldPassword: '旧密码',
    newPassword: '新密码',
    rePassword: '重复密码',
}
const prompt = {
    oldPassword: `请输入${title.oldPassword}`,
    newPassword: `请输入${title.newPassword}`,
    rePassword: `请输入${title.rePassword}`,
}

const formRules = reactive(<FormRules>{
    oldPassword: [{ required: true, message: prompt?.oldPassword, trigger: 'blur' }],
    newPassword: [
        { required: true, message: prompt?.newPassword, trigger: 'blur' },
        { pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
    ],
    rePassword: [
        { required: true, message: prompt?.rePassword, trigger: 'blur' },
        { pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== props.formInline.newPassword) {
                    callback(new Error('两次密码输入不一致'));
                } else {
                    callback();
                }
            }
        }
    ],
});
const ruleFormRef = ref();

function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>